<template>
	<view class="reg_page">
		<item-nav-bar text="用户注册" :close="true" />
		<view style="padding-top: 90rpx;">
			<view class="logo">
				<image src="../../static/img/logo/mall.svg" alt="" />
			</view>
			<form action="">
				<input class='input' v-model="nickname" :class="nickname_class" placeholder="昵称" minlength="3" maxlength="10" />
				<input class='input' v-model="username" :class="username_class" placeholder="用户名" minlength="3" maxlength="10"
					autocomplete="true" />
				<input class='input' v-model="password" :class="password_class" type="password" placeholder="密码" minlength="6"
					maxlength="18" autocomplete="true" />
				<input class='input' v-model="repeatPassword" :class="repeatPassword_class" type="password" placeholder="确认密码"
					minlength="6" maxlength="18" autocomplete="true" />
				<input class='input' v-model="email" :class="email_class" type="email" placeholder="邮箱" maxlength="255" />

				<view id="emailer" :class="getCode" @click="postCode">
					<span v-if="isSended">{{ countdown }}</span>
					<span v-else>发送邮箱验证码</span>
				</view>

				<input class='input' v-model="code" :class="code_class" type="code" placeholder="邮箱验证码" minlength="6" maxlength="6" />

				<view id="register_btn" @click="register" :class="btnActive">
					<span>注册</span>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import ItemNavBar from "components/common/Items/ItemNavBar";
	import {
		mapGetters,
		mapState
	} from "vuex";

	import {
		validCode,
		register,
		sendCode,
		hasUser,
		hasEmail,
	} from "network/register";

	export default {
		components: {
			ItemNavBar
		},
		data() {
			return {
				username: "",
				password: "",
				email: "",
				code: "",
				nickname: "",
				repeatPassword: "",
				countdown: 60,
				isSended: false,
				checkNickname: /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,18}$/,
				checkUsername: /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,18}$/,
				checkPassword: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/,
				checkEmail: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
				checkCode: /\d{6}/,
			};
		},
		computed: {
			btnActive() {
				return this.$invalid ? "btn" : "btn_active";
			},
			checkRepeatPassword() {
				return this.checkPassword.exec(this.password) && this.password === this.repeatPassword;
			},
			nicknameValid() {
				return this.checkNickname.exec(this.nickname);
			},
			usernameValid() {
				return this.checkUsername.exec(this.username);
			},
			passwordValid() {
				return this.checkPassword.exec(this.password);
			},
			emailValid() {
				return this.checkEmail.exec(this.email);
			},
			codeValid() {
				return this.checkCode.exec(this.code);
			},
			getCode() {
				return this.checkRepeatPassword &&
					this.nicknameValid &&
					this.usernameValid &&
					this.passwordValid &&
					this.emailValid &&
					!this.isSended ?
					"btn_active" :
					"btn";
			},
			...mapState(["isLogin"]),
			repeatPassword_class() {
				if (this.repeatPassword.length) {
					return this.checkRepeatPassword ? 'dirty' : 'error';
				}
				return '';
			},
			nickname_class() {
				if (this.nickname.length) {
					return this.nicknameValid ? 'dirty' : 'error';
				}
				return '';
			},
			username_class() {
				if (this.username.length) {
					return this.usernameValid ? 'dirty' : 'error';
				}
				return '';
			},
			password_class() {
				if (this.password.length) {
					return this.passwordValid ? 'dirty' : 'error';
				}
				return '';
			},
			email_class() {
				if (this.email.length) {
					return this.emailValid ? 'dirty' : 'error';
				}
				return '';
			},
			code_class() {
				if (this.code.length) {
					return this.codeValid ? 'dirty' : 'error';
				}
				return '';
			},
		},
		watch: {
			//倒计时
			isSended(newV) {
				if (newV) {
					(async () => {
						for (let i = 60; i >= 0; i--) {
							await new Promise((resolve, reject) => {
								setTimeout(
									(i) => {
										this.countdown = i;
										if (i == 0) {
											this.isSended = false;
											this.countdown = 60;
										}
										resolve();
									},
									1000,
									i
								);
							});
						}
					})();
				}
			},
		},
		methods: {
			register() {
				validCode(this.code, this.email).then(async (res) => {
					if (res[1].data.tag) {
						let data = {
							nickname: this.nickname,
							email: this.email,
							password: this.password,
							username: this.username,
						};
						await register(data).then(async (res) => {
							if (res[1].data.tag) {
								if (!this.isLogin) {

									uni.showModal({
										title: "提示",
										content: `注册成功,是否现在登录?`,
										showCancel: true,
										confirmText: "确定",
										success: async (res) => {
											if (res.confirm) {
												uni.navigateTo({
													url: "/pages/user/Login"
												})
											} else {
												await this.info('已取消');
												uni.switchTab({
													url: "/pages/home/Home"
												})
											}
										},
									})

								} else {
									await this.success('注册成功');
									this.back();
								}
							} else {
								this.error('注册失败,请稍候重试');
							}
						});
					} else {
						this.error('验证码错误');
					}
				});
			},
			status(validation) {
				return {
					error: validation.$error,
					dirty: validation.$dirty,
				};
			},
			postCode() {
				this.checkValid().then((res) => {
					if (res) {
						sendCode(this.username, this.email).then(async (res) => {
							if (res[1].data.tag) {
								this.isSended = true;
								await this.success('发送邮箱验证码成功');
							} else {
								await this.error('发送邮箱验证码失败');
							}
						});
					}
				});
			},
			checkValid() {
				return Promise.all([
					hasUser(this.username).then((res) => {
						return res[1].data.tag;
					}),
					hasEmail(this.email).then((res) => {
						return res[1].data.tag;
					}),
				]).then(async (res) => {
					if (res[1][0] && res[1][1]) {
						await this.error('该用户名与邮箱已被注册');
						return false;
					} else if (res[1][0]) {
						await this.error('该用户名已被注册');
						return false;
					} else if (res[1][0]) {
						await this.error('该邮箱已被注册');
						return false;
					} else {
						return true;
					}
				});
			},
		},

	};
</script>
<style lang="scss" scoped>
	.reg_page {
		background-color: white;
		height: 100vh;
	}

	.logo {
		text-align: center;
		display: flex;
		justify-content: center;
		width: 100vw;
		height: 200rpx;
		
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}

	.input {
		border-bottom: 2rpx solid silver;
		background: white;
		padding: 10rpx 20rpx;
		display: block;
		margin: 20rpx auto;
		width: 90vw;
		height: 70rpx;
		font-size: 40rpx;
		outline: none;
	}

	.dirty {
		border-color: #5a5;
		background: #efe;
	}

	.dirty:focus {
		outline-color: #8e8;
	}

	.error {
		border-color: red;
		background: #fdd;
	}

	.error:focus {
		outline-color: #f99;
	}

	#register_btn {
		width: 90vw;
		height: 120rpx;
		border-radius: 70rpx;
		margin: 60rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: whitesmoke;
	}

	.btn_active {
		background-color: rgb(252, 26, 0);
	}

	.btn {
		background-color: rgb(255, 188, 179);
		pointer-events: none;
	}

	#emailer {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 90vw;
		color: whitesmoke;
		border-radius: 70rpx;
	}
</style>
